<template>
  <div class="Classify">
    <search></search>
    <div style="height: 5px"></div>
    <van-tree-select
      height="90%"
      :items="ClassifyCatalogue"
      :main-active-index.sync="active"
      @click-nav="CatalogueClick"
      
    >
      <template #content>
        <div v-for="(item, index) in ClassifyCatalogue" :key="index">
          <div v-if="active == index" class="lobo">
            <span class="title">{{ ClassifyContentText.desc }}</span>
            <luobo :luobo="ClassifyContentimg"></luobo>

            <Recommend :tobufenl="ClassifyContentgoge"></Recommend>
          </div>
        </div>
      </template>
    </van-tree-select>

    <Tabbar></Tabbar>
  </div>
</template>

<script>
import API from "../http/API.js";
import Recommend from "../components/Recommend/ToRecommend.vue";
import Tabbar from "@/components/Tabbar.vue";
import search from "@/components/Search.vue";
import luobo from "../components/Slideshow.vue";
import { TreeSelect } from "vant";
import { Image } from "vant";
export default {
  name: "classify",
  components: {
    Tabbar,
    search,
    luobo,
    TreeSelect,
    Recommend,
    [TreeSelect.name]: TreeSelect,
    [Image.name]: Image,
  },
  data() {
    return {
      active: 0,
      items: [{ text: "分组 1" }, { text: "分组 2" }],
      Classify: [],
      ClassifyCatalogue: [],

      ClassifyContentText: [],
      // 轮播
      ClassifyContentimg: [],
      // 公格
      ClassifyContentgoge: [],
    };
  },
  created() {
    this.$get(API.GET_HOME_ClASSIFY, {}).then((res) => {
      this.Classify = res.data;
      this.ren(res.data.categoryList, "ClassifyCatalogue");
      this.ClassifyContent(res.data.categoryList[this.active].id);
    });
  },
  methods: {
    ClassifyContent(id) {
      this.$get(API.GET_HOME_ABOUT, { id }).then((res) => {
        // console.log(res.data);
        this.ClassifyContentText = res.data.currentCategory;
        // console.log(this.ClassifyContentText);
        this.ren(res.data.currentSubCategory, "ClassifyContentS");
      });
    },

    // 重新命名
    ren(categoryList, is) {
      if (is == "ClassifyCatalogue") {
        this.ClassifyCatalogue = [];
        for (let index = 0; index < categoryList.length; index++) {
          let arr = {
            addTime: null,
            deleted: null,
            desc: null,
            iconUrl: null,
            id: null,
            keywords: null,
            level: null,
            text: null,
            picUrl: null,
            pid: null,
            sortOrder: null,
            updateTime: null,
          };

          arr.addTime = categoryList[index].addTime;
          arr.deleted = categoryList[index].deleted;
          arr.desc = categoryList[index].desc;
          arr.iconUrl = categoryList[index].iconUrl;
          arr.id = categoryList[index].id;
          arr.keywords = categoryList[index].keywords;
          arr.level = categoryList[index].level;
          arr.text = categoryList[index].name;
          arr.picUrl = categoryList[index].picUrl;
          arr.pid = categoryList[index].pid;
          arr.sortOrder = categoryList[index].sortOrder;
          arr.updateTime = categoryList[index].updateTime;
          this.ClassifyCatalogue.push(arr);
        }
        // console.log();
      } else {
        //
        // 宫格
        let goge = [];
        this.ClassifyContentgoge = [];
        this.ClassifyContentimg = [];
        for (let index = 0; index < categoryList.length; index++) {
          let arr = {
            addTime: null,
            deleted: null,
            desc: null,
            iconUrl: null,
            id: null,
            keywords: null,
            level: null,
            name: null,
            url: null,
            pid: null,
            sortOrder: null,
            updateTime: null,
          };

          arr.addTime = categoryList[index].addTime;
          arr.deleted = categoryList[index].deleted;
          arr.desc = categoryList[index].desc;
          arr.iconUrl = categoryList[index].iconUrl;
          arr.id = categoryList[index].id;
          arr.keywords = categoryList[index].keywords;
          arr.level = categoryList[index].level;
          arr.name = categoryList[index].name;
          arr.url = categoryList[index].picUrl;
          arr.pid = categoryList[index].pid;
          arr.sortOrder = categoryList[index].sortOrder;
          arr.updateTime = categoryList[index].updateTime;
          this.ClassifyContentimg.push(arr);
          goge.push(arr);
        }
        this.ClassifyContentgoge.push(goge);
        this.ClassifyContentgoge.push([
          {
            lei: 3,
          },
        ]);
        this.ClassifyContentgoge.push([
          {
            border: true,
          },
        ]);
         this.ClassifyContentgoge.push([
          {
            url:"/fenlxiangqing",
          },
        ])
        // console.log(this.ClassifyContentgoge);
      }
    },

    CatalogueClick(e) {
      // console.log(e);
      this.ClassifyContent(this.ClassifyCatalogue[this.active].id);
    },
  },
};
</script>

<style lang="less" scoped>
.Classify {
  width: 100%;
  height: 100vh;
  .lobo {
    margin-top: 20px;
    width: 90%;
    height: 100px;
    margin: 0 auto;
    margin-top: 20px;
    background-color: rgb(255, 255, 255);
    .title {
      display: block;
      height: 20px;
      // border: 1px solid #000;
      font-size: 16px;
      font-weight: 550;
      color: rgb(102, 102, 102);
    }
  }
  /* height: 1000px; */
  background-color: @background;
}
</style>
